<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="ID" prop="fileName">
              <el-input v-model="form.ID" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="解决状态" prop="fileUrl">
              <el-input v-model="form.STATE" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="建议反馈" prop="description">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="Input Description"
                      v-model="form.DESCRIPTION" :disabled="disableForm">
            </el-input>
          </el-form-item>
        </el-row>
        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import moduleStore from './bll/pictureStore'
  import store from '../../store'

  //  (!store.state.sysFileUpload) && store.registerModule('sysFileUpload', moduleStore)
  (!store.state.photoshow) && store.registerModule('photoshow', moduleStore)
  export default {
    data() {
      return {
        disableForm: true,
        pageModel: 'ADD',
        form: {
          STATE: '',
          DESCRIPTION: '',
          ID: ''
        }
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.ID = record.ID;
          this.form.STATE = record.STATE;
          this.form.DESCRIPTION = record.DESCRIPTION;
        } else {
          assignDeep(this.form, {
            ID: '',
            STATE: '',
            DESCRIPTION: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['editFile', 'queryPicture', 'queryPictureCount']),
      saveHandler() {
        let self = this;
        this.$refs.form.validate((valid) => {
          if (valid) {
            //继续添加 或 返回列表
            self.editFile({id: this.form.ID, description: this.form.DESCRIPTION}).then(() => {
              self.disable();
              self.$alert('更新信息成功', '消息', {
                confirmButtonText: 'OK'
              });
            })
          } else {
            this.$message({
              showClose: true,
              message: '请确认表单信息',
              type: 'error'
            });
            return false;
          }
          this.$emit('initdata')
        });
      },

      resetHandler() {
        this.$refs.form.resetFields();
        this.disableForm = true;
      },

      initPage() {

      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

